<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>jQuery treeView</title>
	
	<script src="../../jquery/dist/jquery.js" type="text/javascript"></script>
	<script src="jquery.cookie.js" type="text/javascript"></script>
	<script src="jquery.treeview.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("body > ul:first").Treeview({ store: true });
		$("body > ul:eq(1), body > ul:eq(2)").Treeview({ control: "#treecontrol", store: true });
		var lastTree = $("body > ul:last").Treeview({
			speed: "fast",
			collapsed: true,
			unique: true,
			store: true,
			toggle: function() {
				window.console && console.log && console.log("%o was toggled", $(this).parent());
			}
		});
	});
	</script>
	<style type="text/css">
		html, body {height:100%; margin: 0; padding: 0; }

		html>body {
			font-size: 16px; 
			font-size: 68.75%;
		} /* Reset Base Font Size */
		
		body {
			font-family: Verdana, helvetica, arial, sans-serif;
			font-size: 68.75%;
			background: #fff;
			color: #333;
			padding-left: 20px;
		} /* Reset Font Size */

		.treeview, .treeview ul { 
			padding: 0;
			margin: 0;
			list-style: none;
		}	

		.treeview li { 
			margin: 0;
			padding: 3px 0pt 3px 16px;
		}
		
		ul.dir li { padding: 2px 0 0 16px; }
		
	  	.treeview li { background: url(images/tv-item.gif) 0 0 no-repeat; }
	  	.treeview .collapsable { background-image: url(images/tv-collapsable.gif); }
	  	.treeview .expandable { background-image: url(images/tv-expandable.gif); }
	  	.treeview .last { background-image: url(images/tv-item-last.gif); }
	  	.treeview .lastCollapsable { background-image: url(images/tv-collapsable-last.gif); }
	  	.treeview .lastExpandable { background-image: url(images/tv-expandable-last.gif); }
	  	
	  	#red.treeview li { background: url(images/red/tv-item.gif) 0 0 no-repeat; }
	  	#red.treeview .collapsable { background-image: url(images/red/tv-collapsable.gif); }
	  	#red.treeview .expandable { background-image: url(images/red/tv-expandable.gif); }
	  	#red.treeview .last { background-image: url(images/red/tv-item-last.gif); }
	  	#red.treeview .lastCollapsable { background-image: url(images/red/tv-collapsable-last.gif); }
	  	#red.treeview .lastExpandable { background-image: url(images/red/tv-expandable-last.gif); }
	  	
	  	#black.treeview li { background: url(images/black/tv-item.gif) 0 0 no-repeat; }
	  	#black.treeview .collapsable { background-image: url(images/black/tv-collapsable.gif); }
	  	#black.treeview .expandable { background-image: url(images/black/tv-expandable.gif); }
	  	#black.treeview .last { background-image: url(images/black/tv-item-last.gif); }
	  	#black.treeview .lastCollapsable { background-image: url(images/black/tv-collapsable-last.gif); }
	  	#black.treeview .lastExpandable { background-image: url(images/black/tv-expandable-last.gif); }
	  	
	  	#gray.treeview li { background: url(images/gray/tv-item.gif) 0 0 no-repeat; }
	  	#gray.treeview .collapsable { background-image: url(images/gray/tv-collapsable.gif); }
	  	#gray.treeview .expandable { background-image: url(images/gray/tv-expandable.gif); }
	  	#gray.treeview .last { background-image: url(images/gray/tv-item-last.gif); }
	  	#gray.treeview .lastCollapsable { background-image: url(images/gray/tv-collapsable-last.gif); }
	  	#gray.treeview .lastExpandable { background-image: url(images/gray/tv-expandable-last.gif); }
	  	
	  	#treecontrol { margin: 1em 0; }

	</style>
	</head>
	<body>
	<h4>Sample 1 - default</h4>
	<ul class="dir">
		<li><img src="images/folder.gif" /> Folder 1
			<ul>
				<li><img src="images/file.gif" /> Item 1.1</li>
			</ul>
		</li>
		<li><img src="images/folder.gif" /> Folder 2
			<ul>
				<li><img src="images/folder.gif" /> Subfolder 2.1
					<ul>
						<li><img src="images/file.gif" /> File 2.1.1</li>
						<li><img src="images/file.gif" /> File 2.1.2</li>
					</ul>
				</li>
				<li><img src="images/file.gif" /> File 2.2</li>
			</ul>
		</li>
		<li class="closed"><img src="images/folder.gif" /> Folder 3 (closed at start)
			<ul>
				<li><img src="images/file.gif" /> File 3.1</li>
			</ul>
		</li>
		<li><img src="images/file.gif" /> File 4</li>
	</ul>
	
	<h4>Sample 2 - two trees with one tree control, black and gray image set</h4>
	<div id="treecontrol">
		<a href="#">Collapse All</a>
		<a href="#">Expand All</a>
		<a href="#">Toggle All</a>
	</div>
	<ul id="black">
		<li>Item 1</li>
		<li>
			Item 2
			<ul>
				<li>
					Item 2.1
					<ul>
						<li>Item 2.1.1</li>
						<li>Item 2.1.2</li>
					</ul>
				</li>
				<li>Item 2.2</li>
				<li class="closed">
					Item 2.3 (closed at start)
					<ul>
						<li>Item 2.3.1</li>
						<li>Item 2.3.2</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	<ul id="gray">
		<li>Item 1</li>
		<li>
			Item 2
			<ul>
				<li class="closed">
					Item 2.1 (closed at start)
					<ul>
						<li>Item 2.1.1</li>
						<li>Item 2.1.2</li>
					</ul>
				</li>
				<li>Item 2.2.1</li>
				<li>Item 2.2.2</li>
				<li>Item 2.2.3</li>
				<li>Item 2.2.4</li>
				<li>Item 2.2.5</li>
				<li>Item 2.2.6</li>
				<li>Item 2.2.7</li>
				<li>Item 2.2.8</li>
				<li>
					Item 2.3
					<ul>
						<li>Item 2.3.1</li>
						<li>Item 2.3.2</li>
						<li>Item 2.3.3</li>
						<li>Item 2.3.4</li>
						<li>Item 2.3.5</li>
						<li>Item 2.3.6</li>
						<li>Item 2.3.7</li>
						<li>Item 2.3.8</li>
						<li>Item 2.3.9</li>
					</ul>
				</li>
				<li>
					Item 2.4
					<ul>
						<li>Item 2.4.1</li>
						<li>Item 2.4.2</li>
						<li>Item 2.4.3</li>
						<li>Item 2.4.4</li>
						<li>Item 2.4.5</li>
						<li>Item 2.4.6</li>
						<li>Item 2.4.7</li>
						<li>Item 2.4.8</li>
						<li>Item 2.4.9</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>Item 3</li>
	</ul>	
	
	<h4>Sample 3 - fast animations, all branches collapsed at first, red image set</h4>
	<ul id="red">
	<li class="closed">Item 1
		<ul>
			<li>Item 1.0
				<ul>
					<li>Item 1.0.0</li>
				</ul>
			</li>
			<li>Item 1.1</li>
			<li>Item 1.2
				<ul>
					<li>Item 1.2.0
					<ul>
						<li>Item 1.2.0.0</li>
						<li>Item 1.2.0.1</li>
						<li>Item 1.2.0.2</li>
					</ul>
				</li>
					<li>Item 1.2.1
					<ul>
						<li>Item 1.2.1.0</li>
					</ul>
				</li>
					<li>Item 1.2.2
					<ul>
						<li>Item 1.2.2.0</li>
						<li>Item 1.2.2.1</li>
						<li>Item 1.2.2.2</li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Item 2
		<ul>
			<li>Item 2.0
				<ul>
					<li>Item 2.0.0
					<ul>
						<li>Item 2.0.0.0</li>
						<li>Item 2.0.0.1</li>
					</ul>
				</li>
				</ul>
			</li>
			<li>Item 2.1
				<ul>
					<li>Item 2.1.0
					<ul>
						<li>Item 2.1.0.0</li>
					</ul>
				</li>
					<li>Item 2.1.1
					<ul>
						<li>Item 2.1.1.0</li>
						<li>Item 2.1.1.1</li>
						<li>Item 2.1.1.2</li>
					</ul>
				</li>
					<li>Item 2.1.2
					<ul>
						<li>Item 2.1.2.0</li>
						<li>Item 2.1.2.1</li>
						<li>Item 2.1.2.2</li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="open">Item 3
		<ul>
			<li class="open">Item 3.0
				<ul>
					<li>Item 3.0.0</li>
					<li>Item 3.0.1
					<ul>
						<li>Item 3.0.1.0</li>
						<li>Item 3.0.1.1</li>
					</ul>
					
				</li>
					<li>Item 3.0.2
					<ul>
						<li>Item 3.0.2.0</li>
						<li>Item 3.0.2.1</li>
						<li>Item 3.0.2.2</li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	</ul>
	
</body></html>